import { h, ref, onMounted } from 'vue'
import { NButton } from 'naive-ui'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import { DeleteOutlined } from '@vicons/antd'
import { AlertCircle, Pencil } from '@vicons/ionicons5'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: '#',
        key: 'index',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        width: 30
      },
      {
        title: t('taskManage.udfName'),
        key: 'name',
        className: 'name',
        width: 100,
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: t('dataManage.datasourceType'),
        key: 'dbType',
        width: 100,
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](1.8),
        render: (rowData: any, unused: number) => {
          return h('div', null, {
            default: () => [
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'showUdfDetail'),
                  circle: true,
                  type: 'info',
                  size: 'tiny',
                  style: 'margin:0',
                  title: t('taskManage.udfDetail')
                },
                {
                  icon: () => h(AlertCircle)
                }
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'modUdf'),
                  circle: true,
                  type: 'warning',
                  size: 'tiny',
                  style: 'margin:0 2px',
                  title: t('taskManage.modUdf')
                },
                {
                  icon: () => h(Pencil)
                }
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'delUdf'),
                  circle: true,
                  type: 'error',
                  size: 'tiny',
                  style: 'margin:0',
                  title: t('taskManage.delUdf')
                },
                {
                  icon: () => h(DeleteOutlined)
                }
              )
            ]
          })
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
  onMounted(() => {
    createColumns()
  })

  return {
    columnsRef
  }
}
